<template>
  <div style="width: 100%; height: 100%;">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="department" label="部门" width="180"></el-table-column>
      <el-table-column prop="workfaceName" label="工作面名称" width="180"></el-table-column>
      <el-table-column prop="coordinates" label="坐标点" min-width="300">
        <template slot-scope="scope">
          <span>{{ scope.row.coordinates }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="180"></el-table-column>
      <el-table-column prop="remark" label="备注" width="180"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      tableData: [
        { id: 8, department: '一矿', workfaceName: '2407工作面', coordinates: '37485446.219338, 4147838.053548; ...', status: 'ON', remark: '正在采煤' },
        { id: 6, department: '一矿', workfaceName: '4502工作面', coordinates: '37486415.454887, 4149720.817134; ...', status: 'ON', remark: '已经采完' },
        { id: 7, department: '一矿', workfaceName: '4503工作面', coordinates: '37485350.912563, 4149494.752765; ...', status: 'ON', remark: '已经采完' },
        { id: 5, department: '一矿', workfaceName: '5104工作面', coordinates: '37487029.343818, 4144180.914686; ...', status: 'ON', remark: '已经采完' },
        { id: 3, department: '一矿', workfaceName: '5208工作面', coordinates: '37485631.077541, 4146313.267285; ...', status: 'ON', remark: '已经采完' },
        { id: 1, department: '一矿', workfaceName: '5305工作面', coordinates: '37486075.379252, 4146180.307505; ...', status: 'ON', remark: '已经采完' }
      ]
    };
  },
  methods: {
    handleDelete(row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里可以调用后端接口进行删除操作
        const index = this.tableData.findIndex(item => item.id === row.id);
        if (index !== -1) {
          this.tableData.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    }
  }
};
</script>

<style scoped>
.el-table .cell {
  white-space: normal;
}
</style>